<style lang="scss" scoped>
    #intDetails{
        background: #fff;
        padding:10px;
        .m-card{
            margin-bottom:20px;
        }
        .m-card-tr{
            padding:10px;
            .m-card-td{
                padding:0 10px;
                color:#333;
                font-size:16px;
                text-align:left;
                line-height:32px;
                &.m-card-title{
                    font-weight:700;
                }
                &.m-card-content{
                    font-weight:400;
                }
            }
        }
    }
</style>
<template>
    <div id="intDetails" class="content-mask" v-loading="loading">
         <h2>{{chName}}<span v-if="drugName">({{drugName}})</span></h2> 
        <el-card class="m-card" v-for="(item,index) in intDetailList" :key="index">
            <el-row class="m-card-tr" type="flex">
                <el-col :span="4" class="m-card-title m-card-td" >相互作用的药物</el-col>
                <el-col :span="20" class="m-card-content m-card-td">{{item.medicine}}</el-col>
            </el-row>
            <el-row class="m-card-tr" type="flex">
                <el-col :span="4" class="m-card-title m-card-td" >相互作用效果</el-col>
                <el-col :span="20" class="m-card-content m-card-td">{{item.effect}}</el-col>
            </el-row>
            <el-row class="m-card-tr" type="flex">
                <el-col :span="4" class="m-card-title m-card-td" >临床建议</el-col>
                <el-col :span="20" class="m-card-content m-card-td">{{item.proposal}}</el-col>
            </el-row>
            <el-row class="m-card-tr" type="flex">
                <el-col :span="4" class="m-card-title m-card-td" >临床证据</el-col>
                <el-col :span="20" class="m-card-content m-card-td">{{item.evidence}}</el-col>
            </el-row>
            <el-row class="m-card-tr" type="flex">
                <el-col :span="4" class="m-card-title m-card-td" >证据级别</el-col>
                <el-col :span="20" class="m-card-content m-card-td">{{item.level}}</el-col>
            </el-row>
            <el-row class="m-card-tr" type="flex">
                <el-col :span="4" class="m-card-title m-card-td" >参考文献</el-col>
                <el-col :span="20" class="m-card-content m-card-td">{{item.literature}}</el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import { medicine } from "api/index.js";
export default {
    name: 'intDetails',//药物相互作用详情
    data(){
        return{
            loading:false,
            id:"",
            chName:"",
            drugName:"",
            drugObejct:{

            },
            intDetailList:[]
        }
    },
    methods:{
        //获取药物相互作用详情
        getDetails(){
            let obj = {
                id : this.id,
                drugId : this.$store.state.searchId
            };
            this.loading = true;
            medicine.getDrugInterDetails(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                       this.drugObejct = data.data;
                       this.getList();
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("药品列表失败");
            });
        },
        getList(){
            if(this.drugObejct.interaction){
                this.intDetailList= [];
                this.intDetailList.push(this.drugObejct.interaction);
            }
            if(this.drugObejct.drug){
                this.chName = this.drugObejct.drug.chName;
                this.drugName = this.drugObejct.drug.drugName;
            }
        }
    },
    mounted() {
        this.id = M.url().interactionId ? M.url().interactionId : '';
        this.getDetails();
    },
}
</script>